<template>
  <div class="project-form-container">
    <h2 class="form-title">项目创建</h2>
    <el-form :model="form" @submit.native.prevent="submitForm" class="project-form">
      <el-form-item label="项目选题" :required="true">
        <el-switch v-model="isCustomTopic" active-text="自定义选题" inactive-text="选择系统选题" />
        <template v-if="!isCustomTopic">
          <el-select v-model="form.topic" placeholder="请选择项目选题">
            <el-option
              v-for="option in options"
              :key="option.id"
              :label="option.topic"
              :value="option.topic"
            ></el-option>
          </el-select>
        </template>
        <template v-else>
          <el-input v-model="form.topic" placeholder="请输入自定义选题" />
        </template>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="项目描述: ">
        <el-input type="textarea" v-model="form.description" rows="6" placeholder="请添加项目描述"></el-input>
      </el-form-item>
      <el-form-item class="form-buttons">
        <el-button type="primary" @click="submitForm" class="create-button">创建项目</el-button>
        <el-button @click="goBack" class="back-button">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import router from '@/router' // 假设你在项目中使用了 Vue Router

const form = reactive({
  topic: '',
  type: '',
  name: '',
  description: '',
  groupId: '1'
})

const options = ref([])
const isCustomTopic = ref(false)

const submitForm = () => {
  if (!form.topic) {
    ElMessage.error('请选择项目选题或输入自定义选题')
    return
  }

  form.type = isCustomTopic.value ? 'choice' : 'system'

  if (!form.name) {
    ElMessageBox.confirm(
      `项目名称未填写，是否使用项目选题 "${form.topic}" 作为项目名称？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      form.name = form.topic
      saveProject()
    }).catch(() => {
      ElMessage.info('请填写项目名称')
    })
  } else {
    saveProject()
  }
}

const saveProject = () => {
  console.log(form)
  axios.post('http://localhost:8080/projects/save', form)
    .then(response => {
      ElMessage.success('项目创建成功')
    })
    .catch(error => {
      ElMessage.error('项目创建失败')
    })
}

const goBack = () => {
  router.back() // 替换为实际的返回路径
}

onMounted(async () => {
  const projectTopics = await axios.get('http://localhost:8080/project_topics/getAll')
  options.value = projectTopics.data
})
</script>

<style scoped>
.project-form-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
}

.form-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.project-form {
  padding: 0;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item[label="项目描述"] .el-input {
  min-height: 150px; /* 增加项目描述的高度 */
}

.el-button {
  margin-right: 10px;
}

.create-button {
  background-color: #409eff;
  color: white;
  border-radius: 4px;
  padding: 10px 20px;
}

.create-button:hover {
  background-color: #66b1ff;
}

.back-button {
  background-color: #e6e6e6;
  color: #333;
  border-radius: 4px;
  padding: 10px 20px;
}

.back-button:hover {
  background-color: #d3d3d3;
}

.el-input,
.el-select {
  width: 100%;
}

.el-form-item__content {
  display: flex;
  flex-direction: column;
}

.el-input__inner {
  border-radius: 4px;
}

.el-select .el-input {
  border-radius: 4px;
}
</style>
